<template>
	<view class="container">

		<scroll-view class="scrollNav" 
		scroll-x="true"
		>
			<view 
			:class="['item', navItemIndex == item.id ? 'active' : '']" 
			v-for="(item, index) in navList"
			:key="item.id"
			@click="activeNavItem(item.id)"
			>
				{{item.classname}}
			</view>
			
		
		</scroll-view>

		<view class="content">
			<!-- 新闻核心内容展示区域 -->
			<view class="row" v-for="item in newsList" 
			:key="item.id">
				<!-- 对于自定义组件默认是没有点击事件的，
				若需使用html5中的原生时间，需借助.native修饰符
				 -->
				<news-box :item="item" @click.native="toDetail(item)">
					
				</news-box>
			</view>
		</view>
		
		<view class="no-data" v-if="!newsList.length">
			<image src="/static/images/nodata.png" mode="aspectFix"></image>
		</view>
		
		<view class="loading">
			<view v-if="loading == 1">
				数据加载中
			</view>
			<view v-else-if="loading == 2">
				没有更多了
			</view>
		</view>

	</view>
</template>

<script>
	import { API_SERVER_HOST } from '../../utils/common.js'
	export default {
		onPullDownRefresh() {
			// 
			console.log('到达顶部')
			
		},
		onReachBottom() {
			console.log('新闻列表到底部了')
			// 这里有一个减轻后端服务器的压力tip 
			if(this.loading === 2){ // 当没有更多数据时，无需再想后端服务器发送请求
				return 
			}
			this.loading = 1
			this.currentPage++
			this.getNewsByCategory()
		},
		onLoad() {
			this.init() // 初始化页面
		},
		data() {
			return {
				currentPage: 1,
				navItemIndex: 50,
				navList: [],
				newsList: [],
				loading: 0, // 0默认 1加载中 2没有更多了
			}
		},
		methods: {
			resetPage(page=1, pageSize=10){
				this.currentPage = 1
				this.newsList = []
				this.loading = 0
			},
			init(){
				// console.log('before...')
				this.getNavData()
				this.getNewsByCategory()
				// console.log('after...')
			},
			getNavData(){
				uni.request({
					url: `${API_SERVER_HOST}/dataApi/news/navlist.php`,
					success: (res) => {
						if(res.statusCode === 200){
							this.navList = res.data
						}
					}
				})
			},
			getNewsByCategory(categoryId=50){
				uni.showLoading({
					title: '新闻列表加载中'
				})
				uni.request({
					url: `${API_SERVER_HOST}/dataApi/news/newslist.php`,
					data: {
						page: this.currentPage,
						cid: categoryId
					},
					success: (res) => {
						if(res.statusCode === 200){
							this.newsList = this.newsList.concat(res.data)
							uni.hideLoading()
							if(res.data.length === 0){
								this.loading = 2 // 没有更多数据了
							}
						}
					}
				})
			},
			toDetail(newsItem){
				uni.navigateTo({
					url: `/pages/detail/detail?categoryId=${newsItem.classid}&newsItemId=${newsItem.id}`,
					success: (res) => {
						
					}
				})
			},
			activeNavItem(categoryId){
				// 当点击不同导航选项时，需将页码值归零
				this.resetPage()
				this.navItemIndex = categoryId
				this.getNewsByCategory(categoryId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scoped: 是当前组件的样式仅作用于自己，避免污染父组件的样式
	.container {
		.scrollNav {
			position: fixed;
			// 为了保证h5和小程序的兼容性，使用uni-app 提供内置 CSS 变量
			// --window-top： 内容区域距离顶部的距离
			top: var(--window-top);
			left: 0;
			z-index: 1000; // 当出现层叠现象时，保证该元素在最上层
			height: 100rpx;
			background-color: #f7f8fa;
			white-space: nowrap;
			::v-deep ::-webkit-scrollbar {
					width: 4px !important;
					height: 1px !important;
					overflow: auto !important;
					background: transparent !important;
					-webkit-appearance: auto !important;
					display: block;
				}
			.item {
				display: inline-block;
				padding: 0 30rpx;
				font-size: 40rpx;
				line-height: 100rpx;
				color: #333;
				&.active {
					color: #31c27c; // /* 当 .item 同时有 .active 类时生效 */
				}
			}
		}
	
		.content {
			margin-top: 100rpx;
			padding: 30rpx;
			.row {
				border-bottom: 1px dashed #efefef;
				padding: 15rpx 0rpx;
			}
		}
		.no-data {
			display: flex;
			justify-content: center;
			image {
				width: 360rpx;
			}
		}
		.loading {
			text-align: center;
			color: #888;
			font-size: 26rpx;
			line-height: 2em;
		}
	}
</style>